<template>
	<view class="deregister-container">
		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 注销须知卡片 -->
			<view class="notice-card">
				<view class="notice-title">1. 注销须知</view>
				<view class="notice-intro">
					如果您申请注销商城帐号，请在提交申请前确认以下信息，以保证您的帐号和财产安全：
				</view>
				
				<view class="notice-items">
					<view class="notice-item">
						<text class="item-number">1.1.</text>
						<text class="item-text">您的帐号处于正常使用状态，未发生过被盗、被封禁(禁言、停用)、其他帐号异常情形等;</text>
					</view>
					
					<view class="notice-item">
						<text class="item-number">1.2.</text>
						<text class="item-text">帐号内财产已结清。包括:您的钱包内余额已清空或已全部提现,您的账户内没有未完成的权益和订单。您也可选择放弃该帐号内的财产。</text>
					</view>
					
					<view class="notice-item">
						<text class="item-number">1.3.</text>
						<text class="item-text">帐号已解除与第三方产品的绑定关系或授权登录关系。</text>
					</view>
					
					<view class="notice-item">
						<text class="item-number">1.4.</text>
						<text class="item-text">帐号未涉及任何争议纠纷。</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮区域 -->
		<view class="button-section">
			<view class="confirm-text">确认注销账号吗?</view>
			<view class="button-group">
				<u-button
					type="default"
					text="注销账号"
					@click="handleDeregister"
					class="deregister-btn"
				></u-button>
				<u-button
					type="primary"
					text="退出注销"
					@click="handleExit"
					class="exit-btn"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面数据
			}
		},
		methods: {
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['帮助', '联系客服', '关于我们'],
					success: (res) => {
						console.log('选择了第' + (res.tapIndex + 1) + '个按钮');
					}
				});
			},
			
			// 处理注销账号
			handleDeregister() {
				uni.showModal({
					title: '确认注销',
					content: '注销账号后，您的所有数据将被永久删除且无法恢复。确定要继续吗？',
					confirmText: '确定注销',
					confirmColor: '#ff4757',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 显示加载状态
							uni.showLoading({
								title: '注销中...'
							});
							
							// 模拟注销过程
							setTimeout(() => {
								uni.hideLoading();
								
								// 清除所有本地存储数据
								uni.removeStorageSync('userInfo');
								uni.removeStorageSync('token');
								uni.removeStorageSync('userPassword');
								uni.removeStorageSync('personalizedRecommendation');
								uni.removeStorageSync('addressList');
								
								uni.showToast({
									title: '账号已注销',
									icon: 'success'
								});
								
								// 返回首页
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}, 1500);
							}, 2000);
						}
					}
				});
			},
			
			// 处理退出注销
			handleExit() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
.deregister-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	
	.content {
		flex: 1;
		padding: 40rpx;
		
		.notice-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 40rpx;
			border: 2rpx solid #ff4757;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
			
			.notice-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 30rpx;
			}
			
			.notice-intro {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				margin-bottom: 40rpx;
			}
			
			.notice-items {
				.notice-item {
					display: flex;
					margin-bottom: 30rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.item-number {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						margin-right: 20rpx;
						flex-shrink: 0;
					}
					
					.item-text {
						font-size: 28rpx;
						color: #333;
						line-height: 1.6;
						flex: 1;
					}
				}
			}
		}
	}
	
	.button-section {
		padding: 40rpx;
		background-color: #f5f5f5;
		
		.confirm-text {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 30rpx;
		}
		
		.button-group {
			display: flex;
			gap: 20rpx;
			
			.deregister-btn {
				flex: 1;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 500;
				background-color: #fff;
				border: 2rpx solid #e0e0e0;
				color: #333;
				
				&:active {
					background-color: #f8f8f8;
				}
			}
			
			.exit-btn {
				flex: 1;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 500;
				background: linear-gradient(135deg, #ff4757, #ff3742);
				border: none;
				color: #fff;
				
				&:active {
					transform: scale(0.98);
				}
			}
		}
	}
}
</style> 